<template>
    <div class="main">
        <div class="top">
            <el-carousel indicator-position="none" :autoplay="false">
                <el-carousel-item v-for="item in 4" :key="item">

                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="middle">
            <div class="left">
                <div>
                    <div class="totlavisit">总访问量</div>
                    <div class="totlavisitnum">3349</div>
                </div>
                <div>
                    <div class="todayvisit">今日访问量</div>
                    <div class="todayvisitnum">3349</div>
                </div>
            </div>
            <div class="right">
                <div class="item" v-for="item in 3" :key="item">
                    <div class="title">
                        <img class="titleIcon" src="/images/document.png">
                        <div class="titlename">项目{{ item }}</div>
                    </div>
                    <div class="desc">
                        模块介绍
                    </div>
                    <div class="linkto">
                        <div>
                            <el-icon><Right /></el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>


</script>

<style scoped lang = 'scss'>
.main {
    @include flex_colum;
    @include padding_setting('mini');
    background-color: #e7e7e7;
    .top {
        @include padding_setting('mini');
        border-radius: 10px;
        width: 100%;
        height: 70%;
        .el-carousel {
            border-radius: 10px;
            height: 100%;
            :deep(.el-carousel__container) {
                height: 100% !important;
            }
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
            height: 100%;
        }

        .el-carousel__item:nth-child(2n + 1) {
            background-color: #d3dce6;
        }
    }

    .middle {
        flex: 1;
        @include padding_setting('mini');
        border-radius: 10px;
        display: flex;
        .left {
            @include flex_colum(space-around);
            @include padding_setting('middle');
            text-align: left;
            width: 30%;
            font-size: 24px;
            font-weight: bold;
            .totlavisit,
            .todayvisit {
                font-size: 18px;
            }

            .totlavisitnum,
            .todayvisitnum {
                font-size: 40px;
            }
        }

        .right {
            @include padding_setting('mini');
            flex: 1;
            border-radius: 4px;
            display: flex;
            align-items: center;
            .item {
                @include flex_colum(space-between);
                @include padding_setting('large');
                flex: 1;
                border-radius: 10px;
                height: 100%;
                background-color: #ffffff;
                margin: 10px;
                .title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .titleIcon{
                        width: 40px;
                    }
                    .titlename{
                        font-weight: bold;
                        font-size: 30px;
                    }
                }
                .desc {
                    padding: 10px 2px;
                    font-size: 14px;
                    box-sizing: border-box;
                }

                .linkto {
                    >div{
                        float:right;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 30%;
                        font-weight: bold;
                        color: white;
                        height: 30px;
                        text-align: center;
                        border-radius: 20px;
                        background-color: rgb(155, 179, 245);
                    }
                }
            }

        }
    }
}</style>